<template>
  <div class="sixCaptcha" >
    <div 
      v-for="index in 6" 
      :key="index"
      @click="getFocus(index)" 
      @keyup.delete.native='deleteValue(index)'               
      ref="codeInputItem"
      class="code-input-item">
      {{inputCode[index-1]}}
    </div>
    <el-input v-model="inputCode" @input="change" autocomplete="off" :maxlength="6" ref="codeInput" ></el-input>
  </div>
</template>

<script>
export default {
  // model:{
  //   prop:'code',//这个字段，是指父组件设置 v-model 时，将变量值传给子组件的 msg
  //   event:'parent-event'//这个字段，是指父组件监听 parent-event 事件
  // },

  data () {
    return {
      inputCode: '',
      doms: null,
    }
  },
  props:{
    code: {
      type: String,
      default: () => []
    }
  },
  mounted(){
    
  },

  methods: {
    getFocus (index) {
      this.boxIndex = index
      this.$nextTick ( () => {
        this.$refs['codeInput'].focus()
        // this.doms = this.$refs['codeInputItem']
        // for (let i = 0; i < this.doms.length; i++) {
        //   if (i == (index - 1)) {
        //     this.$refs['codeInputItem'][i].classList.add("animation")
        //   } else {
        //     this.$refs['codeInputItem'][i].classList.remove("animation")
        //   }
        // }
      })
    },
    deleteValue (index) {
    },
    change(val) {
      this.$emit('updateCode',val)
    }
  }
 
}
</script>

<style lang='less' scoped>
  .sixCaptcha {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    @keyframes blink {
      0%, 100% {
        background-color: #000;
        }
      50% {
        background-color: transparent;
      } 
    }
    .code-input-item {
      flex: 1px;
      margin-left: 20px;
      height:30px;
      border-bottom:1px solid rgba(191,191,191,1);
      // border-radius:5px;
      text-align: center;
      padding-bottom: 0;
      color:rgba(57,57,57,1);
      font-size:15px;
      z-index: 99;
      position: relative;
    }
    .code-input-item:first-child {
      margin-left:0px;
    }
    .isValue {
      background:rgba(248,248,248,1);
    }

    .animation::after {
      position: absolute;
      content: '';
      display: inline-block;
      width: 2px;
      height: 18px;
      top: 50%;
      transform: translateY(-50%);
      animation: blink 1.2s infinite steps(1, start);
    }

    /deep/.el-input {
      position: absolute;
      width: 100%;
      left: 0;
      
      .el-input__inner {
        color: transparent;
        text-shadow: 0 0 0 transparent;
        outline: none;
        border: 0;
        padding: 0 0;

        // margin-left: -100%;
      }
      .el-input__inner::selection {
          background:#FFF;
      }
      .el-input__inner::-moz-selection {
          background:#FFF;
      }
      .el-input__inner::-webkit-selection {
          background:#FFF;
      }
    }

  }
</style>